<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <script type="text/javascript" src="${ctx}/appjs/msg/tenantNotice.js"></script>
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">系统设置</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>通知公告</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>编辑通知公告</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">公告详情</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content" style="padding-bottom: 150px">
                    <form class="form-horizontal m-t layui-form" id="frmTenantNotice">
                        <input id="noticeId" name="noticeId" value="${tenantNotice.noticeId}" type="hidden">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">标题：</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" value="${tenantNotice.title}" id="title" name="title">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">消息类型：</label>
                            <div class="col-sm-2">
                                <input type="radio" class="form-control" name="noticeType"
                                       lay-filter="noticeType"
                                       title="系统公告" value="0" <c:if test="${tenantNotice.noticeType eq '0'}">checked</c:if>>
                            </div>
                            <div class="col-sm-2">
                                <input type="radio" class="form-control" name="noticeType"
                                       lay-filter="noticeType" title="活动" value="1" <c:if test="${tenantNotice.noticeType eq '1'}">checked</c:if>>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">内容：</label>

                            <div id="editor—wrapper">
                                <div id="toolbar-container"><!-- 工具栏 --></div>
                                <div id="editor-container"><!-- 编辑器 --></div>
                            </div>
                            <textarea class="layui-textarea" id="content" style="display: none"  name="content" autocomplete="off"></textarea>
                        </div>


                        <div class="layui-form-item">
                            <button style="margin:0 auto;display:block;" class="layui-btn" type="button" data-type="text"  id="fileNotifySubmit"><i
                                    class="fa fa-check-circle"></i> 发布
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var prefix = jsctx + "/tenantNotice";

    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = { MENU_CONF: {} }
    editorConfig.MENU_CONF['uploadImage'] = {
        server: prefix + '/uploadFile',
        timeout: 5 * 1000, // 5s
        fieldName: 'file',
        meta: { token: 'xxx', a: 100 },
        metaWithUrl: true, // join params to url
        headers: { Accept: 'text/x-json' },
        maxFileSize: 10 * 1024 * 1024, // 10M
        base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
        onBeforeUpload(file) {
            console.log('onBeforeUpload', file)

            return file // will upload this file
            // return false // prevent upload
        },
        onProgress(progress) {
            console.log('onProgress', progress)
        },
        onSuccess(file, res) {
            console.log('onSuccess', file, res)
        },
        onFailed(file, res) {
            alert(res.message)
            console.log('onFailed', file, res)
        },
        onError(file, err, res) {
            alert(err.message)
            console.error('onError', file, err, res)
        },
    }

    var editor = createEditor({
        selector: '#editor-container',
        html: '${tenantNotice.content}',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
    var toolbarConfig = {}
    var toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
    layui.use(['layedit','form'], function(){
        var layedit = layui.layedit
            ,$ = layui.jquery
            ,form = layui.form;
        //设置图片上传
        layedit.set({
            uploadImage: {
                url: prefix + '/uploadFile' //图片上传方法的接口url
                ,type: 'post' //默认post
            }
        });
        //构建富文本编辑器，构建方法一定要写在set方法下边
        //var index = layedit.build('content');

        //校验表单的方法，并将富文本编辑器中的内容同步到文本域中
        form.verify({
            content : function(value) {
                return layedit.sync(index); //同步语句
            }
        });

        //保存表单内容提交的方法
        $('#fileNotifySubmit').on('click', function(){
            var active = {
                //获取纯文本内容： 111
                //如果要获取样式，将text替换成 content: <p>111</p>
                //如果要获取选中的文字，将text替换成selected：111
                text: function(){
                    //获取富文本编辑器值的语句并赋值到文本域中
                    document.getElementById("content").innerText = editor.getHtml();
                }
            };

            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            var form = new FormData(document.getElementById("frmTenantNotice"));
            debugger
            //保存表单内容的请求，此处为文件通知对象
            $.ajax({
                url: prefix + "/saveTenantNotice",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success: function (result) {
                    if (result.status == 200) {
                        parent.layer.msg("成功");
                        window.history.back();
                    }else {
                        parent.layer.alert(data.message);
                    }
                }
            });
        });
    });
    //重新加载的方法
    layui.use(['table', 'laydate','element'], function () {
        var table = layui.table, form = layui.form, $ = layui.jquery;
    });




    $("#file").change(function () {
        var objUrl = getObjectURL(this.files[0]);//获取文件信息
        if (objUrl) {
            $("#imgUrl").attr("src", objUrl);
        }
    });

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    addTenantNotice.init();
</script>


</body>
</html>
